<template>
    <div>
        <q-modal v-model="opn" minimized :content-css="{padding:'30px 50px 30px 50px'}">
            <h4 class="margin20">{{opstr}}</h4>
            <div class="rec">
                <!-- <q-input v-model="BM" placeholder="期数" :readonly="opstr=='参考码新增'||opstr=='参考码修改'"></q-input> -->
                <q-input v-model="NAME" placeholder="名字"></q-input>
                <q-input v-model="COLOR" placeholder="颜色"></q-input>
                <!-- <q-input v-model="D2" placeholder="码2"></q-input>
                <q-input v-model="D3" placeholder="码3"></q-input>
                <q-input v-model="D4" placeholder="码4"></q-input>
                <q-input v-model="D5" placeholder="码5"></q-input>
                <q-input v-model="D6" placeholder="码6"></q-input>
                <q-input v-model="D7" placeholder="码7"></q-input> -->
            </div>
            <q-btn-group class="margin20">
                <q-btn color="primary" @click="save">保存</q-btn>
            </q-btn-group>
            <q-btn-group class="margin20">
                <q-btn color="secondary" @click="opn = false" label="关闭" />
            </q-btn-group>
        </q-modal>
        <!--分割线-->
        <q-modal v-model="sopn" minimized :content-css="{padding:'30px 50px 30px 50px'}">
            <h4 class="margin20">{{opstr}}</h4>
            <div class="rec">
                <q-input v-model="BM" placeholder="期数" :readonly="sopstr=='参考码新增'||sopstr=='参考码修改'"></q-input>
                <q-input v-model="OS" placeholder="号码"></q-input>
            </div>
            <q-btn-group class="margin20">
                <q-btn color="primary" @click="ssave">保存</q-btn>
            </q-btn-group>
            <q-btn-group class="margin20">
                <q-btn color="secondary" @click="sopn = false" label="关闭" />
            </q-btn-group>
        </q-modal>
        <!--分割线-->
        <div class="row">
            <div class="col">
                <h4 class="margin12">衣服类别</h4>
                <q-btn-group outline>
                    <q-btn color="blue" @click="add" icon="add" label="添加"></q-btn>
                    <q-btn color="blue" @click="edt" icon="create"  label="修改"></q-btn>
                    <q-btn color="blue" @click="del" icon="delete"  label="删除"></q-btn>
                    <q-btn color="blue" @click="refresh" icon="replay"  label="刷新"></q-btn>
                    <!-- <q-input v-model="pickbm" placeholder="起始期数" class="pickbm"></q-input>
                    <q-btn :loading="loading" color="blue" @click="pick"  label="抓取"></q-btn> -->
                </q-btn-group>
                <q-table 
                    rows-per-page-label="每页行数：" 
                    :data="ds" 
                    :filter="filter" 
                    :columns="cols" 
                    :selection="sltmode" 
                    :selected.sync="slt" 
                    :pagination.sync="pagination" 
                    row-key="id" 
                    @request="loadds"
                >
                    <q-tr slot="header" slot-scope="props">
                        <q-td auto-width>
                            <q-checkbox 
                             v-if="props.multipleSelect" 
                             v-model="props.slt"
                             indeterminate-value="some" />
                        </q-td>
                        <q-td v-for="col in props.cols" :key="col.name" :props="props">
                            {{ col.label }}
                        </q-td>
                    </q-tr>
                    <template slot="body" slot-scope="props">
                        <q-tr :props="props"  @click.native="rowClick(props.row)">
                            <q-td auto-width>
                            <q-checkbox color="primary" v-model="props.selected" />
                            </q-td>
                            <q-td v-for="col in props.cols"  :key="col.name" :props="props">
                                {{ col.value }}
                            </q-td>
                        </q-tr>
                    </template>
                </q-table>                  
            </div>
        </div>        
    </div>
</template>

<script>
    import axios from 'axios'
    import {
        QCheckbox,
        QBtnGroup,
        QModal,
        QBtn,
        QTable,
        QTh,
        QTr,
        QTd,
        QTableColumns,
        QInput
    } from 'quasar'
    export default {
        components: {
            QCheckbox,
            QBtnGroup,
            QModal,
            QInput,
            QTable,
            QTh,
            QTr,
            QTd,
            QTableColumns,
            QBtn
        },
        data() {
            return {
                srow: [],
                loading: false,
                sltmode: 'multiple',
                slt: [],
               // sslt: [],
                cols: [{
                    name: 'id',
                    required: true,
                    label: 'id',
                    align: 'left',
                    field: 'id',
                    sortable: true
                }, {
                    name: 'name',
                    required: true,
                    label: '名字',
                    align: 'left',
                    field: 'name',
                    sortable: true
                }, {
                    name: 'color',
                    required: true,
                    label: '颜色',
                    align: 'left',
                    field: 'color',
                    sortable: true
                }],
                filter: '',
                pickbm:'',
                ds: [],
               // sds: [],             
                pagination: {
                    descending: false,
                    rowsPerPage: 5,
                    page: 1,
                    rowsNumber: 0
                },
                sopn: false,                       
                opn: false, 
                sopstr: '',  
                opstr: '',                                            
                ID: '',
                NAME: '',
                COLOR: '',
                // D1: '',
                // D2: '',
                // D3: '',
                // D4: '',
                // D5: '',
                // D6: '',
                // D7: '',
                // OS:'',                
            }
        },
        methods: {
            loadds(props) {
                this.pagination=props.pagination
                var self = this
                console.log('test1')
                axios.post('/lstcloth', {
                        pageno: this.pagination.page,
                        pagesize: this.pagination.rowsPerPage
                    })
                    .then(function(response) {
                        var rt = response.data
                        if (rt.success) {
                            self.pagination.rowsNumber = rt.total
                            // for (var i = 0; i < rt.ds.length; i++) {
                            //     var tmp = rt.ds[i]
                            //     var str='['+tmp.s1+']'
                            //     for(var j=1;j<=7;j++){
                            //         str+=','+tmp['d'+j]
                            //     }
                            //     rt.ds[i].recstr = str
                            // }
                            self.ds = rt.ds
                        } else {
                            self.$q.notify('出错了！')
                        }
                    })
                    .catch(function(error) {
                        self.$q.notify('未知错误！')
                    })
            },            
            add() {
                this.opstr = '衣服类别新增'
                this.opn = true
                this.ID = 0
                this.NAME = ''
                this.COLOR = ''
                // this.D1 = ''
                // this.D2 = ''
                // this.D3 = ''
                // this.D4 = ''
                // this.D5 = ''
                // this.D6 = ''
                // this.D7 = ''
            },
            save() {
                // var reg = /^[0-9]{5}$/
                // var regs = /^[0-9]{2}$/
                
                var self = this
                axios.post('/addcloth', {
                        id: this.ID,
                        name: this.NAME,
                        color: this.COLOR,
                    })
                    .then(function(response) {
                        var rt = response.data
                        if (rt.success) {
                            self.$q.notify({
                                message: '保存成功',
                                type: 'positive',
                            })
                        } else {
                            self.$q.notify('出错了！')
                        }
                    })
                    .catch(function(error) {
                        self.$q.notify('未知错误！')
                    })
                this.opn = false
                this.slt = []
                self.refresh()
            },            
            edt() {
                this.opstr = '衣服类别修改'
                this.opn = true
                if (this.slt.length != 1) {
                    this.$q.notify('请只选择一条记录进行修改！')
                    this.opn = false
                    return
                }
                var tmp=this.slt[0]
                this.ID = tmp.id
                this.NAME = tmp.name
                this.COLOR = tmp.color
            },
            del() {
                if (this.slt.length == 0) {
                    this.$q.notify('请选择记录进行删除！')
                    return
                }
                var rs = []
                var bm = []
                for (var i = 0; i < this.slt.length; i++) {
                    rs.push(this.slt[i].id)
                   // bm.push(this.slt[i].bm)
                }
                var self = this
                axios.post('/delcloth', {
                        ids: rs,
                      //  bms: bm
                    })
                    .then(function(response) {
                        var rt = response.data
                        if (rt.success) {
                            self.$q.notify({
                                message: '删除成功',
                                type: 'positive',
                            })
                        } else {
                            self.$q.notify('出错了！')
                        }
                    })
                    .catch(function(error) {
                        self.$q.notify('未知错误！')
                    })
                self.refresh()
                //self.srefresh()
            },
            refresh() {
                this.loadds({
      pagination: this.pagination
    })
            },
            // rowClick(row) {
               
            //     this.srow=row
            //      this.loadsds(this.srow)
            // },
            // loadsds(srow){
            //     var self = this
            //     axios.post('/lstsrec', {
            //             bm: srow.bm
            //         })
            //         .then(function(response) {
            //             var rt = response.data
            //             if (rt.success) {
            //                 self.total = rt.total
            //                 for (var i = 0; i < rt.ds.length; i++) {
            //                     var tmp = rt.ds[i]
            //                     var str=tmp.s1
            //                     for(var j=1;j<=11;j++){
            //                         if(tmp['d'+j]!=''){
            //                           str+=','+tmp['d'+j]
            //                         }
                                    
            //                     }
            //                     rt.ds[i].recstr = str
            //                 }
            //                 self.sds = rt.ds
            //             } else {
            //                 self.$q.notify('出错了！')
            //             }
            //         })
            //         .catch(function(error) {
            //             self.$q.notify('未知错误！')
            //         })
            // },
            
        },
        mounted: function() {
            this.loadds({
      pagination: this.pagination
    })
        }
    }
</script>

<style lang="stylus">

.margin12 
  margin 12px

.margin20 
  margin 20px

.rec
  width 250px

.pickbm
  width 100px  

</style>